<!-- 首次进入弹出模态层，选择进入的项目 -->

<template>
    <div>
        <Modal
                v-model="modalTask"
                title="选择项目"
                width="38%"
                :mask-closable="false"
                :closable="false"
        >
            <div style="display: flex;flex-flow: row wrap;">
                <div v-for="(item, index) in selectTaskName" :key="item.id" class="taskName" @click="selectTask(item.id)">
                    {{item.name}}
                </div>
                <div v-if="emptyMsg">{{emptyMsg}}</div>
            </div>
            <div slot="footer">
                <Button @click="hideModal">取消</Button>
            </div>
        </Modal>
    </div>

</template>

<script>
    import util from '../../../../libs/util';
    export default {
        name: 'modalShow',
        props: [
            'modalShow'
        ],
        data () {
            return {
                modalTask: true,
                emptyMsg: '',
                selectTaskName: [], // 所有项目名称数据
                beforeTaskId: null // 选择对项目id
            };
        },

        mounted () {
            // console.log('this.props -->', this.props);
        },

        methods: {
            // 获取初始项目列表
            getTaskData () {
                let params = {
                    'length': 0
                };
                console.log('localStorage -->', localStorage);
                util.ajax.get('api/caseinter_project/getTaskName/0', {params: params}).then(res => {
                    if (res.data.code === 200) {
                        this.selectTaskName = res.data.data.otherData;
                        if (res.data.data.otherData.length === 0) {
                            this.emptyMsg = '请先创建项目';
                        }
                    } else {
                        // 登录失败
                        console.log('获取内容异常');
                    }
                });
            },

            // 选择项目
            selectTask (projectId) {
                // console.log('projectId -->', projectId);
                localStorage.projectId = projectId;
                this.$emit('updateProjectId', projectId, false);
            },
            // 关闭模态框
            hideModal () {
                this.$emit('hideModal');
            }
        },
        created () {
            this.getTaskData();
            // console.log('localStorage.projectId-->', localStorage.projectId);
            // if (localStorage.projectId) {
            //     let modalShow = false;
            //     this.$emit('updateProjectId', localStorage.projectId, modalShow);
            // } else {
            //     this.getTaskData();
            // }
        }
    };
</script>

<style scoped>

    .taskName {
        border: 1px solid #4a5161;
        border-radius: 10px;
        width: 300px;
        text-align: center;
        margin: 20px 20px 0 20px;
        padding: 30px;
        font-size: 30px;
    }

</style>
